<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="author" content="风月笑平生">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="keywords" content="html,html5,css,css3,javascript,jquery,bootstrap,nodejs,vue,react,uniapp,小程序" />
  <meta name="description" content="IT技术,技术分享,技术博客,web前端,ui设计,java开发" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>{{ title }}</title>
  <link rel="shortcut icon" href="favicon.ico" />
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/editormd.css" />
  <link rel="stylesheet" href="css/common.css" />
  <script src="js/jquery-3.6.0.js"></script> 
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="js/editormd.js"></script>
</head>
<body>

<!--导航条-->
<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="/">HELLOM</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            {{each nav}}
            <li class="nav-item active">
              <a class="nav-link" href="{{$value.path}}">{{$value.title}}</a>
            </li>
            {{/each}}
            <li class="nav-item">
              <!-- 搜索 -->
              <input class="form-control me-2" type="search" placeholder="请搜索您感兴趣的内容" autocomplete="off"  id="search">
            </li>
          </ul>
          <ul class="nav nav-pills">
            {{ if isUser}}
            <li class="nav-item">
                <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#login" class="more">登录</a> /
                <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#register" class="more">注册</a>
            </li>
            {{ else }}
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="javascript:;">
                <img src="{{ avatar||'img/user.png' }}" width="32" height="32" style="border-radius:50%" id="avatar"/>  
                欢迎 ：{{ nickname }}
              </a>
              <div class="dropdown-menu text-center" style="left: 56px;">
                <a class="dropdown-item" href="/user" id="user">用户管理</a>
                <a class="dropdown-item" href="/article" id="article">文章管理</a>
                <a class="dropdown-item" href="javascript:;" id="quit">退出登录</a>
              </div>
            {{/if}}
          </li>
          </ul>
        </div>
    </div>
  </nav>
</header>

<!--内容占位-->
{{block 'content'}} {{/block}}

<!--尾部-->
<footer class="bg-light">
  <!--友情链接-->
  <div class="container pt-5">
    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
        <h2>友情链接</h2>
        <p>
          <a href="http://www.lynnk.cn/web">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>
        </p>
        <p>
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>
        </p>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
        <h2>友情链接</h2>
        <p>
          <a href="http://www.lynnk.cn/web">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>
        </p>
        <p>
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>
        </p>
      </div>
    </div>
  </div>
  <div class="container mt-5 pb-2">
    <div class="row">
      <p class="text-center" id="site">
        Copyright ©2021-2022 oO风月笑平生Oo All Rights Reserved.
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=2021000607">赣ICP备:2021000607号</a> 
      </p>     
    </div>
  </div>
</footer>

<!--登录-->
<div class="modal fade" id="login" tabindex="-1" >
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header px-5">
        <h5 class="modal-title">登录您的帐号</h5>
        <button type="button" id="dr_close" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>        
      </div>
      <div class="modal-body px-5">
        <form id="loginForm">
          <div class="mb-3">
            <label for="loginName" class="form-label">帐号*</label>
            <input type="text" class="form-control required" id="loginName" placeholder="手机号或邮箱" name="username"/>
            <span></span>
          </div>
          <div class="mb-3">
            <label for="loginPwd" class="form-label">密码*</label>
            <input type="text" class="form-control" id="loginPwd" placeholder="密码,长度6-20" name="password">
            <span></span>
          </div>
          <div class="mb-3">
            <input type="submit" class="form-control btn-primary" id="dr" value="登录" >
          </div>
          <hr>
          <div class="text-center">
            还没有帐号，现在注册? <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#register" class="toRegister">注册新用户</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!--注册-->
<div class="modal fade" id="register" tabindex="-1" >
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header px-5">
        <h5 class="modal-title">注册新帐户</h5>
        <button type="button" id="zc_close" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body px-5">
        <form action="" method="post">
          <div class="mb-3">
            <label for="username" class="form-label">帐号*</label>
            <input type="text" class="form-control" id="registerName" placeholder="手机号或邮箱" name="username">
            <span></span>
          </div>
          <div class="mb-3">
            <label for="username" class="form-label">昵称*</label>
            <input type="text" class="form-control" id="registerNickname" placeholder="昵称,中英文,长度4-8" name="nickname">
            <span></span>
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">密码*</label>
            <input type="text" class="form-control" id="registerPwd" placeholder="密码,长度6-20" name="password">
            <span></span>
          </div>
          <div class="mb-3">
            <input type="submit" class="form-control btn-primary" id="zc" value="注册">
          </div>
          <div class="text-center">
            已有帐号 ? <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#login" class="toLogin">立即登录</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- 返回顶部 -->
<a id="scrollUp" href="#top" title="返回顶部"></a>

<script>

  // 表单验证
  // 手机号正则
  const phone = /^(((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(17[0-9]|[5-9])|(18[0,5-9]))\d{8})$/;
  // 邮箱正则
  const email = /^([a-zA-Z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
  // 密码正则
  const password = /^[0-9A-Za-z]{6,20}$/;
  // 昵称正则
  const nickname = /^([\u4e00-\u9fa5|0-9A-Za-z]){4,8}$/;
  // 注册变量判断
  let isRegName,isRegNickname,isRegPwd,isLogName,isLogPwd

  // 登录用户名
  $("#loginName").on('input',function(){
    if ( !phone.test($(this).val()) && !email.test($(this).val()) ) {      
      $(this).parent().find('span').html('手机或邮箱输入错误,手机号码为11位,邮箱为163,QQ等邮箱').css('color','red'); 
      isLogName = false;
    }else {     
      $(this).parent().find('span').html('手机或邮箱输入正确').css('color','green');
      isLogName = true;      
    }
  })
  
  // 登录密码
  $("#loginPwd").on('input',function(){
    if ( !password.test($(this).val()) ) {      
      $(this).parent().find('span').html('密码输入错误,密码是数字或英文,长度6-20').css('color','red'); 
      isLogPwd = false;                  
    }else {     
      $(this).parent().find('span').html('密码输入正确').css('color','green');
      isLogPwd = true;            
    }
  })
  
  // 注册用户名
  $("#registerName").on('input',function(){
    if ( !phone.test($(this).val()) && !email.test($(this).val()) ) {      
      $(this).parent().find('span').html('手机或邮箱输入错误,手机号码是11位,邮箱是163,QQ等邮箱').css('color','red'); 
      isRegName = false; 
    }else {     
      $(this).parent().find('span').html('手机或邮箱输入正确').css('color','green');
      isRegName = true;       
    }
  })

  // 注册昵称
  $("#registerNickname").on('input',function(){
    if ( !nickname.test($(this).val()) && !email.test($(this).val()) ) {      
      $(this).parent().find('span').html('昵称输入错误,昵称是中文或者英文,数字,长度为4-8').css('color','red');
      isRegNickname = false;                  
    }else {     
      $(this).parent().find('span').html('昵称输入正确').css('color','green'); 
      isRegNickname = true;     
    }
  })

  // 注册密码
  $("#registerPwd").on('input',function(){
    if ( !password.test($(this).val()) ) {      
      $(this).parent().find('span').html('密码输入错误,密码是数字或英文,长度6-20').css('color','red');  
      isRegPwd = false;                 
    }else {     
      $(this).parent().find('span').html('密码输入正确').css('color','green'); 
      isRegPwd = true;      
    }
  })

  // 注册
  $("#zc").click(function (e){
    // 阻止表单的默认行为
    e.preventDefault();
    // 获取输入的input值
    const username = $("#registerName").val();
    const nickname = $("#registerNickname").val();
    const password = $("#registerPwd").val();

    // console.log(isRegName,isRegNickname,isRegPwd);
    if ( !isRegName || !isRegNickname || !isRegPwd ) {
      alert('用户名，昵称及密码没有通过');
      return;  
    }
   
    // if ( (username==='' || !isRegName) || (nickname==='' || !isRegNickname) || (password==='' || !isRegPwd) ) {
    //   console.log('用户名，昵称及密码没有通过');
    //   return;     
    // }

    //发送请求
    $.ajax({
      // 请求地址
      url:"/register",
      //请求类型
      type:"POST",
      //请求参数
      data:{ username, nickname, password },
      //请求成功
      success:function (result){   //  { code:200,msg:"注册成功" }
        if ( result.code === 200 ) {
          // $("#register .modal-body").html(`<h3>恭喜您，${result.msg}</h3>`);
            alert(result.msg);
        }else if( result.code === 500 ){
          // $("#register .modal-body").html(`<h3>不好意思，${result.msg}</h3>`);
            alert(result.msg);
        } 
        location.href="/";
      },
      //请求失败
      error:function (error){
        alert("请求失败:",error);
      }
    })
  })

  // 登录
  $("#dr").click(function (e){
    // 阻止表单的默认行为
    e.preventDefault();
    // 获取表单的value
    var username=$("#loginName").val();
    var password=$("#loginPwd").val();
    // 判断
    if (!isLogName || !isLogPwd) {
      alert('登录用户名及密码不通过');
      return;
    }

    // 发送登录请求
    $.ajax({
      // 请求地址
      url:"/login",
      //请求类型
      type:"POST",
      //请求参数
      data:{username,password},
      //请求成功
      success:function (result){      
        if ( result.code === 200 ) {
            // $('#login .modal-body').html(`<h3>恭喜您，${result.msg}</h3>`);
            alert(result.msg);
            location.href="/";
        } else {
            // $('#login .modal-body').html(`<h3>不好意思，${result.msg}</h3>`);
            // alert(result.msg);
            // confirm(result.msg);
            // 判断是否强制登录
            if (confirm(result.msg)) {
                  // 发送请求到后端，实现退出登录清除req.session;
                  $.ajax({
                    // 请求地址
                    url:"/quit",
                    //请求类型
                    type:"POST",
                    //请求参数
                    data:{username},
                    //请求成功
                    success:function ({code,msg}){
                      if (code === 200) {
                        $("#dr").click();
                      }
                    },
                    //请求失败
                    error:function (result){
                      alert("请求失败")
                    }
                  });
            }else{
              $("#dr_close").click();
            }
        }
      },
      //请求失败
      error:function (result){
        alert("请求失败")
      }
    })
  })

  // 点击退出登录（清除用户信息） 
  $("#quit").click(function(){
    // 在模板页面script种获取art-template传递过来的数据，只需要在前面添加双引号即可
    const nickname = "{{nickname}}";  
    // 发送请求到后端，实现退出登录清除req.session;
    $.ajax({
      // 请求地址
      url:"/quit",
      //请求类型
      type:"POST",
      //请求参数
      data:{nickname:nickname},
      //请求成功
      success:function ({code,msg}){
        if (code === 200) {
          location.href="/";
        }
      },
      //请求失败
      error:function (result){
        alert("请求失败")
      }
    })

  });

  // 搜索
  $('#search').change(function(e){
    e.preventDefault();
    e.stopPropagation();
    location.href = "/search?s="+$(this).val();
  })

  // 返回顶部  
  $(function() {
    $(window).scroll(function() {
      //当滚动条的位置处于距顶部50像素以下时，跳转链接出现，否则消失
      if ($(window).scrollTop() > 50) {
        $("#scrollUp").fadeIn(200);
      } else {
        $("#scrollUp").fadeOut(200);
      }
    });
    //当点击跳转链接后，回到页面顶部位置
    $("#scrollUp").click(function() {
      $('body,html').animate({scrollTop: 0},500);
      return false;
    });
  });

  // CNZZ流量统计
  $("#site").append(unescape("%3Cspan id='cnzz_stat_icon_1281109466'%3E%3C/span%3E%3Cscript src='https://s4.cnzz.com/z_stat.php%3Fid%3D1281109466%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));

</script>

</body>
</html>


